<template>
	<div class="page2">
		<img src="../assets/images/zhanhui/top.png" width="100%" />
		<div style="padding-bottom: 100px;background-color: #f5f5f5;">
			<p>平安普惠诚邀留下您的足迹<br>
					我们将为您提供更好的服务，感谢支持</p>
			<van-form  @submit="onSubmit">
				<van-field
					name="realname"
					v-model="realname"
					placeholder="请输入您的姓名"
				/>
				<van-field
					name="mobile"
					v-model="mobile"
					placeholder="请输入您的联系方式"
				/>
			
				<van-button color="#ea5504" round block type="info" native-type="submit">
					立即提交
				</van-button>
			</van-form>
			<van-overlay :show="show">
				<div class="wrapper" @click.stop>
					<router-link :to="{name: 'Live'}"><img src="../assets/images/zhanhui/enter.png" width="80%"/></router-link>
					<van-icon name="close"  size="35" color="#fff" @click="show = false"/>
				</div>
			</van-overlay>
			<Bottom></Bottom>
		</div>
	</div>
</template>

<script>
import Bottom from '@/pages/home/bottom.vue'
import { saveUser } from '@/api/user'
export default {
	components: {
    Bottom
  },
  data() {
    return {
      realname: '',
      mobile: '',
      show: false,
    };
  },
  created() {
  	if(this.$store.state.user.mobile) {
  		this.$router.push({name: 'Live'})
  	}
  },
  methods: {
    onSubmit(values) {
    	if(this.realname == '') {
    		this.$toast('请输入您的姓名')
    		return
    	}
    	if(this.mobile == '') {
    		this.$toast('请输入您的联系方式')
    		return
    	}
    	this.$toast.loading({
			  message: '加载中...',
			  forbidClick: true,
			  loadingType: 'spinner',
			});
    	saveUser({realname: this.realname, mobile: this.mobile}).then(res=> {
    		this.$toast.clear()
    		this.show = true
    		this.$store.commit('SET_USER', res)
    	})
			// this.show = true
      console.log('submit', values);
    },
  },
};	
</script>

<style>
	.page2{
		width: 100%;
		background-color: #f5f5f5;
		position: relative;
		/* overflow: hidden; */
	}
	.page2>img{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.page2 p{
		text-align: center;
		color: #fa7148;
		font-size: 17px;
		padding-top: 60vh;
		line-height: 28px;
	}
	.page2 form{
		width: 90%;
		margin: auto;
	}
	.page2 .van-cell{
		background-color: #fff;
		border-radius: 999px;
		margin: 10px 0;
		padding: 8px 12px;
	}
	.page2 .van-field__control{
		text-align: center;
	}
	.page2 .van-button{
		font-size: 15px;
		line-height: 32px;
		height: 2.4em;
		margin-top: 2vh;
		/* margin-bottom: 15vh; */
	}
	.page2 .wrapper img{
		margin: auto;
		display: block;
		margin-left: 10%;
		margin-top: 15%;
	}
	.page2 .wrapper i{
		position: fixed;
		top: 67vh;
		left: 47%;
	}
</style>
